@import "thin";

%scrollable {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

%viewport-basic {
  position: absolute;
  width: 100%;
  left: 0;
  box-sizing: border-box;
  @extend %scrollable;
}

%viewport {
  @extend %viewport-basic;
  height: 100%;
  top: 0;
}

%ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 伪类绘制一个高清的面板
%pseudo-scale-half {
  @extend %pseudo-absolute;
  width: 200%;
  height: 200%;
  left: 0;
  top: 0;
  transform: scale(0.5);
  transform-origin: left top;
}

%icon-arrow-right {
  border-style: solid;
  border-color: transparent #c8c8cd #c8c8cd transparent;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  transform: rotate(-45deg);
  margin-left: -6px;
  border-width: 1px;
}

%pseudo-icon-arrow-right::after {
  content: ' ';
  @extend %icon-arrow-right;
}
